<template>
  <div class="provinceCityArea">
    <div style="flex: 1">
      <el-select-v2
        style="width: 100%"
        v-model="propSelectValue"
        filterable
        :props="propsSelect"
        :options="propSelectOptions || []"
        :placeholder="$t(propSelectPlaceholder || '请选择')"
        :clearable="clearable || true"
        popper-class="vxe-table--ignore-clear"
        :multiple="multiple"
        @clear="onPropSelectClose"
        @change="onPropSelectChange($event)"
      />
    </div>
    <div style="flex: 2">
      <el-cascader
        style="width: 100%"
        v-model="propCascader"
        :props="cascaderProps"
        :placeholder="$t(placeholder || '请选择')"
        :options="options"
        filterable
        popper-class="vxe-table--ignore-clear"
        :clearable="clearable || true"
        @clear="onCascaderClose"
        @change="onCascaderChange($event)"
      />
    </div>
  </div>
</template>

<script setup>
import { ref, watch, computed, onMounted } from "vue";
import i18n from "@/lang/index.js";
import * as api from "@/api/index.js";
const propSelectOptions = ref([]);
const options = ref([]);
const props = defineProps({
  propSelectCode: {
    type: String,
    default: "",
  },
  prop: {
    type: String,
    default: "",
  },
  propsSelect: {
    type: Object,
    default: {
      label: "label",
      value: "value",
    },
  },
  cascaderProps: {
    type: Object,
    default: {
      label: "label",
      value: "value",
    },
  },
  propSelectPlaceholder: {
    type: String,
    default: "",
  },
  placeholder: {
    type: String,
    default: "",
  },
  clearable: {
    type: Boolean,
    default: "",
  },
  multiple: {
    type: Boolean,
    default: false,
  },
});
const emit = defineEmits([
  "update:propSelectCode",
  "update:prop",
  "onPropSelectChange",
  "onPropSelectClose",
  "onCascaderClose",
  "onCascaderChange",
]);
onMounted(() => {
  getCountryList();
});
const propSelectValue = computed({
  get() {
    return props.propSelectCode;
  },
  set(value) {
    emit("update:propSelectCode", value);
  },
});
const propCascader = computed({
  get() {
    return props.prop;
  },
  set(value) {
    emit("update:prop", value);
  },
});
const treeList = async (val) => {
  const { data } = await api.default.system.provinceCityArea.treeList({
    countryCode: val,
  });
  options.value = data;
};
watch(
  () => propSelectValue.value,
  (value) => {
    if (value) {
      treeList(value);
    }
  },
  {
    immediate: true,
  }
);
const getCountryList = async () => {
  const { rows } = await api.default.system.provinceCityArea.countryList({
    pageSize: 300,
    enableFlag: "1",
  });
  const treeData = rows.map((item) => ({
    ...item,
    label: i18n.global.t(item.countryName),
  }));
  propSelectOptions.value = treeData;
};
const onPropSelectChange = (value) => {
  if (value) {
    const data = propSelectOptions.value.find(
      (item) => item[props.propsSelect.value] === value
    );
    console.log(value);

    emit("onPropSelectChange", value, data);
    onCascaderClose();
  }
};
const onPropSelectClose = (value) => {
  emit("onPropSelectClose");
};
const onCascaderClose = () => {
  emit("onCascaderClose");
};
const onCascaderChange = (value) => {
  emit("onCascaderChange", options.value, value);
};
</script>

<style lang='scss' scoped>
.provinceCityArea {
  width: 100%;
  height: 100%;
  display: flex;
}
</style>